SourceLinks

Introduction

For components to interact inside your app, they need a way to exchange data.
In yeet, there are two main approaches:

UI Snippets
React to events using custom JavaScript.

SourceLinks
For many use cases, you can handle data exchange without code.
In a receiver component, you simply choose:

• a data source (sender component) and
• an event from that source.

When the event is triggered, the data is automatically passed to the receiver and processed there.

In practice, many scenarios can be solved using only SourceLinks, without writing a single line of JavaScript.

Functionality

We differentiate between two roles:

Sender components
Components that send data to an internal event bus when an event occurs.

Receiver components
Components that subscribe to events from sender components and automatically react when those events are triggered.

A single component can:

• act as sender,
• act as receiver, or
• be both at the same time.

It can also react to multiple events from different senders.

Configuring Receiver Components

To make a component react to SourceLink events:

1. Select the component in the UI Designer.
2. Configure its SourceLinks via the Toolbar.

Additional configuration options are available in the Detail Panel under the “Links” category:

• all available SourceLinks for the component are listed there,
• clicking a SourceLink opens a dedicated picker where you can choose sender and event.

Sender Components

When configuring a sender component, you decide:

• which events it exposes for SourceLinks, and
• when a SourceLink event should actually be fired.

Using event functions, you can control if an event should trigger a SourceLink.
If an event function returns false, the SourceLink event will not be sent.

Clipboard

SourceLinks can also interact with a Clipboard, enabling data flow:

• between pages, or
• between your frontend and the database.

Using SourceLinks, you can:

• update single Clipboard properties or entire property sets,
• trigger actions like commit-create or similar operations.

Usage

Forms

A common pattern:

1. Use a Row Select event on a table to fill a Clipboard via a SourceLink.
2. Connect Clipboard properties to form fields using further SourceLinks.
   • each UI element displays the value of a corresponding Clipboard property.
3. Create SourceLinks in the opposite direction so that changes in the form write back to the Clipboard.

This creates a simple, no-code data flow between table, clipboard, and form.

Text modules

A label can use SourceLink event data inside template strings.
This allows you to create dynamic text modules, for example:

• Hello {firstName}!
• Selected row: {id} – {description}

Expressions

Table filters can also be populated via SourceLinks.
Here, template strings are supported as well, so you can build dynamic filters based on user actions or other components.

Examples

You can find concrete examples in:

• yLabel

  • Creating a template string using a yInput SourceLink event.
  • Loading table data via a yTable SourceLink event.

• Clipboards

  • Loading data from a table into a Clipboard and using it in forms or other components.